import { EventListProps } from '@/api';
import { Icon, Popup } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';

export default function useInvitationCode(props: {
  detail: EventListProps;
  onClose?: Function;
}) {
  const [show, setShow] = useState<boolean>(false);

  function renderNode() {
    return (
      <Popup
        show={show}
        style={{
          backgroundColor: 'transparent',
          top: '40vh',
        }}
      >
        <View className=' flex justify-end mb-2'>
          <Icon
            className=' text-white text-3xl'
            name='close'
            onClick={() => {
              setShow(false);
              props.onClose && props.onClose();
            }}
          />
        </View>
        <View className='w-[670px] overflow-hidden'>
          <View className=' bg-white rounded-t-xl px-3 py-3'>
            {/* thumb */}
            <View
              className='h-[380px] bg-cover bg-slate-400 relative rounded-xl overflow-hidden'
              style={{
                backgroundImage: `url(${props.detail?.img})`,
              }}
            >
              <View className=' absolute left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.2)] text-white py-2 px-4'>
                <Text className=' block text-lg font-bold'>
                  {props.detail?.title}
                </Text>
                <Text className=' block text-xs'>{props.detail?.subtitle}</Text>
              </View>
            </View>

            {/* label */}
            <View className=' px-2'>
              {props.detail?.event_start && (
                <>
                  <Text className=' text-gary1 text-base block mt-4 leading-none mb-1'>
                    活动时间
                  </Text>
                  <Text className=' block text-lg text-black font-bold'>
                    {props.detail?.event_start}
                  </Text>
                </>
              )}
              <Text className=' text-gary1 text-base block mt-4 leading-none mb-1'>
                活动地点
              </Text>
              <Text className=' block text-lg text-black font-bold'>
                {props.detail?.location}
              </Text>
            </View>
          </View>

          <View
            className='w-full h-[244px] pt-[80px] -mt-[4px]'
            style={{
              backgroundSize: '100% 100%',
              backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/card-footer1.png)`,
            }}
          >
            <View className='bg-[#EFF3FA] text-center flex items-center justify-center text-xs mx-6 text-gary1 py-5 relative'>
              <Image
                onClick={() => {
                  if (!props.detail?.code) return;
                  Taro.setClipboardData({
                    data: props.detail?.code,
                  });
                }}
                className='w-[40px] h-[40px] absolute right-1 top-1'
                mode='aspectFill'
                src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-copy.svg'
              />
              核销码
              <Text className='text-[52px] font-bold text-black ml-2'>
                {props.detail?.code}
              </Text>
            </View>
          </View>
        </View>
      </Popup>
    );
  }

  return {
    renderNode,
    open: () => setShow(true),
  };
}
